<div class="gutterVMd2">
  <div class="contentBox padMd clrP clrBr clrSh3">
    <div class="flexHCent">
      <h2 class="h3 clrT"><%= ob.polyT('settings.advancedTab.sectionName') %></h2>
      <%= ob.processingButton({
        className: 'btn clrP clrBAttGrad clrBrDec1 clrTOnEmph modalContentCornerBtn js-save',
        btnText: ob.polyT('settings.btnSave')
      }) %>
    </div>
    <hr class="clrBr" />
    <div class="tabFormWrapper clrS">
        <div class="js-appearanceContainer">
          <form class="box padMdKids padStack clrP clrBr js-appearance">
            <div class="flexRow gutterH TODO">
              <div class="col3">
                <label><%= ob.polyT('settings.advancedTab.appearance.visualEffects') %></label>
                <div class="clrT2 txSm"><%= ob.polyT('settings.advancedTab.helperVisualEffects') %></div>
              </div>
              <div class="col9">
                <div class="btnStrip">
                  <div class="btnRadio clrBr">
                    <input type="radio"
                           data-persistence-location="local"
                           name="showAdvancedVisualEffects"
                           value="true"
                           id="advancedTabVisualEffectsOn"
                           data-var-type="boolean"
                    <% if(ob.showAdvancedVisualEffects) { %>checked<% } %>>
                    <label for="advancedTabVisualEffectsOn"><%= ob.polyT('settings.on') %></label>
                  </div>
                  <div class="btnRadio clrBr">
                    <input type="radio"
                           data-persistence-location="local"
                           name="showAdvancedVisualEffects"
                           value="false"
                           id="advancedTabVisualEffectsOff"
                           data-var-type="boolean"
                    <% if(!ob.showAdvancedVisualEffects) { %>checked<% } %>>
                    <label for="advancedTabVisualEffectsOff"><%= ob.polyT('settings.off') %></label>
                  </div>
                </div>
              </div>
            </div>
            <div class="flexRow gutterH">
              <div class="col3">
                <label><%= ob.polyT('settings.advancedTab.appearance.windowControlStyle') %></label>
                <div class="clrT2 txSm"><%= ob.polyT('settings.advancedTab.helperWindowControls') %></div>
              </div>
              <div class="col9">
                <div class="btnStrip">
                  <div class="btnRadio clrBr">
                    <input type="radio"
                           data-persistence-location="local"
                           name="windowControlStyle"
                           value="mac"
                           id="windowControlStyleMac"
                           data-var-type="string"
                    <% if(ob.windowControlStyle == "mac") { %>checked<% } %>>
                    <label for="windowControlStyleMac"><%= ob.polyT('settings.advancedTab.appearance.macOS') %></label>
                  </div>
                  <div class="btnRadio clrBr">
                    <input type="radio"
                           data-persistence-location="local"
                           name="windowControlStyle"
                           value="win"
                           id="windowControlStyleWindows"
                           data-var-type="string"
                    <% if(ob.windowControlStyle == "win") { %>checked<% } %>>
                    <label for="windowControlStyleWindows"><%= ob.polyT('settings.advancedTab.appearance.windowsOS') %></label>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
    </div>
  </div>
  <div class="contentBox padMd clrP clrBr clrSh3">
    <h2 class="h4 clrT"><%= ob.polyT('settings.advancedTab.transaction.sectionName') %></h2>
    <hr class="clrBr" />
    <div class="tabFormWrapper clrS">
      <div class="js-transactionContainer">
        <form class="box padMdKids padStack clrP clrBr js-transaction">
          <div class="flexRow gutterH">
            <div class="col3">
              <label><%= ob.polyT('settings.advancedTab.transaction.saveMetadata') %></label>
              <div class="clrT2 txSm"><%= ob.polyT('settings.advancedTab.helperSaveMetaData') %></div>
            </div>
            <div class="col9">
              <div class="btnStrip">
                <div class="btnRadio clrBr">
                  <input type="radio"
                         data-persistence-location="local"
                         name="saveTransactionMetadata"
                         value="true"
                         id="saveTransactionMetadataOn"
                         data-var-type="boolean"
                  <% if(ob.saveTransactionMetadata) { %>checked<% } %>>
                  <label for="saveTransactionMetadataOn"><%= ob.polyT('settings.on') %></label>
                </div>
                <div class="btnRadio clrBr">
                  <input type="radio"
                         data-persistence-location="local"
                         name="saveTransactionMetadata"
                         value="false"
                         id="saveTransactionsMetadataOff"
                         data-var-type="boolean"
                  <% if(!ob.saveTransactionMetadata) { %>checked<% } %>>
                  <label for="saveTransactionsMetadataOff"><%= ob.polyT('settings.off') %></label>
                </div>
              </div>
            </div>
          </div>
          <div class="flexRow gutterH js-feeSection">
            <div class="col3">
              <label><%= ob.polyT('settings.advancedTab.transaction.defaultFee') %></label>
              <div class="clrT2 txSm"><%= ob.polyT('settings.advancedTab.helperDefaultFee') %></div>
            </div>
            <div class="col9">
              <% if (ob.errors['defaultTransactionFee']) print(ob.formErrorTmpl({ errors: ob.errors['defaultTransactionFee'] })) %>
              <div class="btnStrip">
                <div class="btnRadio clrBr">
                  <input type="radio"
                         data-persistence-location="local"
                         name="defaultTransactionFee"
                         value="SUPER_ECONOMIC"
                         id="defaultTransactionFeeSuperLow"
                         data-var-type="string"
                  <% if(ob.defaultTransactionFee == "SUPER_ECONOMIC") { %>checked<% } %>>
                  <label for="defaultTransactionFeeSuperLow"><%= ob.polyT('settings.advancedTab.transaction.superlow') %></label>
                </div>
                <div class="btnRadio clrBr">
                  <input type="radio"
                         data-persistence-location="local"
                         name="defaultTransactionFee"
                         value="ECONOMIC"
                         id="defaultTransactionFeeLow"
                         data-var-type="string"
                  <% if(ob.defaultTransactionFee == "ECONOMIC") { %>checked<% } %>>
                  <label for="defaultTransactionFeeLow"><%= ob.polyT('settings.advancedTab.transaction.low') %></label>
                </div>
                <div class="btnRadio clrBr">
                  <input type="radio"
                         data-persistence-location="local"
                         name="defaultTransactionFee"
                         value="NORMAL"
                         id="defaultTransactionFeeMedium"
                         data-var-type="string"
                  <% if(ob.defaultTransactionFee == "NORMAL") { %>checked<% } %>>
                  <label for="defaultTransactionFeeMedium"><%= ob.polyT('settings.advancedTab.transaction.medium') %></label>
                </div>
                <div class="btnRadio clrBr">
                  <input type="radio"
                         data-persistence-location="local"
                         name="defaultTransactionFee"
                         value="PRIORITY"
                         id="defaultTransactionFeeHigh"
                         data-var-type="string"
                  <% if(ob.defaultTransactionFee == "PRIORITY") { %>checked<% } %>>
                  <label for="defaultTransactionFeeHigh"><%= ob.polyT('settings.advancedTab.transaction.high') %></label>
                </div>
              </div>
            </div>
          </div>
          <div class="flexRow gutterH">
            <div class="col3">
              <label>
                <%= ob.polyT('settings.advancedTab.server.blockData') %>
              </label>
              <div class="clrT2 txSm">
                <%= ob.polyT('settings.advancedTab.server.blockDataHelper') %>
              </div>
            </div>
            <div class="col9">
              <div class="flexVCent gutterH">
                <%= ob.processingButton({
                className: `btn clrP clrBr clrSh2 js-blockData ${ob.isGettingBlockData ? 'processing' : ''}`,
                btnText: ob.polyT('settings.advancedTab.server.blockDataBtn'),
                }) %>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="contentBox padMd clrP clrBr clrSh3">
    <h2 class="h4 clrT"><%= ob.polyT('settings.advancedTab.server.sectionName') %></h2>
    <hr class="clrBr" />
    <div class="tabFormWrapper clrS">
      <div class="js-serverContainer">
        <form class="box padMdKids padStack clrP clrBr js-server">
          <div class="flexRow gutterH">
            <div class="col3">
              <label>
                <%= ob.polyT('settings.advancedTab.server.management') %>
              </label>
              <div class="clrT2 txSm"><%= ob.polyT('settings.advancedTab.server.managementHelper') %></div>
            </div>
            <div class="col9">
              <a class="btn clrP clrBr clrSh2 js-showConnectionManagement flexNoShrink"><%= ob.polyT('settings.advancedTab.server.managementBtn') %></a>
            </div>
          </div>
          <div class="flexRow gutterH">
            <div class="col3">
              <label>
                <%= ob.polyT('settings.advancedTab.server.peers') %>
              </label>
              <div class="clrT2 txSm"><%= ob.polyT('settings.advancedTab.server.peersHelper') %></div>
            </div>
            <div class="col9">
              <a  href="#connected-peers"
                  class="btn clrP clrBr clrSh2 js-showConnectedPeers flexNoShrink">
                    <%= ob.polyT('settings.advancedTab.server.peersBtn') %>
              </a>
            </div>
          </div>
          <div class="flexRow gutterH">
            <div class="col3">
              <label>
                <%= ob.polyT('settings.advancedTab.server.purge') %>
              </label>
              <div class="clrT2 txSm">
                <%= ob.polyT('settings.advancedTab.server.purgeHelper') %>
                <span class="toolTip toolTipTop" data-tip="<%= ob.polyT('settings.advancedTab.server.purgeToolTip') %>">
                  <i class="ion-help-circled"></i>
                  </span>
              </div>
            </div>
            <div class="col9">
              <div class="flexVCent gutterH">
                <%= ob.processingButton({
                className: `btn clrP clrBr clrSh2 js-purge ${ob.isPurging ? 'processing' : ''}`,
                btnText: ob.polyT('settings.advancedTab.server.purgeBtn'),
                }) %>
                <div class="js-purgeComplete hide">
                  <i class="h4 clrTEmph1"><%= ob.polyT('settings.advancedTab.server.purgeComplete') %></i>
                </div>
              </div>
            </div>
          </div>
          <div class="flexRow gutterH js-backupWalletSection">
            <div class="col3">
              <label>
                <%= ob.polyT('settings.advancedTab.server.backupWalletLbl') %>
              </label>
              <div class="clrT2 txSm">
                <%= ob.polyT('settings.advancedTab.server.backupWalletHelper') %>
              </div>
            </div>
            <div class="col9 js-walletSeedContainer">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <% if (ob.bundled) { %>
    <div class="contentBox padMd clrP clrBr clrSh3">
      <h2 class="h4 clrT"><%= ob.polyT('settings.advancedTab.integrations.sectionName') %></h2>
      <hr class="clrBr" />
      <div class="tabFormWrapper clrS">
        <div class="">
          <form class="box padMdKids padStack clrP clrBr">
            <div class="flexRow gutterH">
              <div class="col3">
                <label>
                  <%= ob.polyT('settings.advancedTab.integrations.sharing') %>
                </label>
                <div class="clrT2 txSm"><%= ob.polyT('settings.advancedTab.integrations.sharingHelper') %></div>
              </div>
              <div class="col9 js-metricsStatusWrapper"></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  <% } %>
  <div class="contentBox js-contentBoxEmailIntegration padMd clrP clrBr clrSh3">
    <h2 class="h4 clrT"><%= ob.polyT('settings.advancedTab.smtp.sectionName') %></h2>
    <hr class="clrBr" />
    <div class="tabFormWrapper clrS">
      <div class="js-smtpSettingsContainer"></div>
    </div>
  </div>
  <div class="contentBox padMd clrP clrBr clrSh3">
    <div class="flexHRight">
      <%= ob.processingButton({
        className: 'btn clrP clrBAttGrad clrBrDec1 clrTOnEmph js-save',
        btnText: ob.polyT('settings.btnSave')
      }) %>
    </div>
  </div>
</div>
